<m-api-data-table [dataSource]="dataSource" [selection]="selection" #table>
  <ng-container mDataTableColumn header="区域名称">
    <ng-template let-area="area_name">
      <td>{{ area }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="终端别名">
    <ng-template let-id="id" let-name="name">
      <td>
        <a [mDetailRouterLink]="{ id: id, name: name, type: 'computer' }">
          {{ name }}
        </a>
      </td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="终端备注">
    <ng-template let-remark="remark">
      <td>{{ remark }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="在线">
    <ng-template let-online="online">
      <td>
        <m-online-status-text [status]="online"></m-online-status-text>
      </td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="状态">
    <ng-template let-status="status">
      <td>
        <m-enable-status-text [status]="status"></m-enable-status-text>
      </td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="系统更新">
    <ng-template let-status="need_upgrade">
      <td>
        <m-update-status-text [status]="status"></m-update-status-text>
      </td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="软件更新">
    <ng-template let-status="need_upgrade">
      <td>
        <m-update-status-text [status]="status"></m-update-status-text>
      </td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="系统更新时间">
    <ng-template let-updated_at="updated_at">
      <td>
        {{ updated_at | date }}
      </td>
    </ng-template>
  </ng-container>
  <button class="btn btn-sm btn-secondary" (click)="table.selectAll(true)">全选</button>
</m-api-data-table>
